<%@ page import="org.jeecgframework.web.util.StaticValue" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<!DOCTYPE html >
<html>
<head>
    <title>巡检综合报告</title>
    <t:base type="jquery,easyui,tools,echarts"></t:base>
    <style>
        .chart-container {
            width: 100%;
        }

        .search-bar {
            height:40px;
            width: 98%;
            margin: 0 auto;
        }

        .search-bar .condition {
            width: 90%;
            float: left;
            text-align:left;
        }

        .search-bar div:last-child {
            width: 8%;
            float: right;
            text-align: right;
        }

        .search-bar span {
            padding-right: 10px;
        }

        .search-bar span select {
            height: 24px !important;
        }

        .search-bar .search-btn {
            float: right;
            width: 10%;
            text-align: center;
            line-height: 40px;
        }

        #chart {
            width: 95%;
            height: 600px;
            margin: -5px auto
        }
        .pp-div{
            margin-left: 5px;
            width: 100%;
            float: left;
            margin-top:-200px;
        }
        .pp-div p{
            color:#7d7b7b;
            font-size: 17px;
            word-spacing:1px;
            letter-spacing:1px;
        }
        .pp-div span{
            color:#7d7b7b;
            font-size: 14px;
            word-spacing:1px;
            letter-spacing:1px;
        }
    </style>
</head>
<body>
<div class="chart-container">
    <div class="search-bar">
        <div class="condition">
            <form id="searchForm">
                <span>
                    <label>年度选择:</label>
                    <select name="year" id="year"  style="width:60px;">
                            <c:forEach begin="2016" end="2019" var="y">
                                <option value="${y}" <c:if test="${y eq 2019 }" >selected='selected'</c:if>>${y}</option>
                            </c:forEach>

                        </select>
                </span>
                <c:if test="${empty chain}">
                <span>
                    <label>月份:</label>
                    <select name="month" id="month" style="width:80px;">
                            <option value="">请选择</option>
                            <c:forEach begin="1" end="12" var="m">
                                <option value="${m}">${m}月</option>
                            </c:forEach>

                        </select>
                </span>
                <span>
                    <label>院线:</label>
                    <input id="intheaterId_1" type="hidden">
                    <input id="intheatername_1" name="intheatername_1" readonly="readonly" class="inputxt" style="width: 120px;"/>
                    <t:choose hiddenName="intheaterId_1" hiddenid="id" inputTextname="intheatername_1"
                              url="zyIntheaterController.do?zyintheatersCheckboxList"
                              name="intheaterList" icon="icon-search" title="院线列表" textname="typename"
                              isclear="true" height="300px" width="400px"/>
                </span>
                <span>
                    <label>省市:</label>
                    <input type="text" id="province" name="province"/>
                    <script type="text/javascript">
                        territoryLink("", "province");
                    </script>
                </span>
                <span>
                    <label>机型:</label>
                     <input id="typeId" name="typeId" type="hidden"/>
                        <input id="typeName" type="text" readonly="readonly" style="width: 80px" class="inputxt"
                               datatype="*"
                               nullmsg="请选择机型 "/>
                        <t:choose hiddenName="typeId" hiddenid="id" inputTextname="typeName" textname="text"
                                  title="机型" url="zyEquipmentTypeController.do?goChooseEquipmentTypeForEquipment"
                                  name="zyEquipmentTypeList" width="600px" height="400px"
                                  icon="icon-search" isclear="true"/>
                </span>
                </c:if>
            </form>
        </div>
        <div>
            <span>
                <a href="javascript:void(0);" class="easyui-linkbutton search"
                   data-options="iconCls:'icon-search'">查询</a>
            </span>
        </div>
    </div>

    <div id="chart" style="margin-top: 50px;">

    </div>
    <div class="pp-div">
        <p >影院环境综合评分：


            <span>影院环境综合评分是巡检工程师对现场环境的综合评价。参考项目包括：用电环境、运行环境、维护情况、放映人员技术情况。
            仪表盘中绿色指针指向全国平均分，另一指针指向贵院线巡检设备平均分。它会随具体数值变化颜色，如果显示红色，您就需要对贵院线的设备环境多加注意了！</span>
        </p>
        <p>巡检满意度评分：
            <span>巡检满意度评分是巡检后，中影巴可400工作人员对现场联系人的满意度回访平均分。体现了贵院线对于中影巴可巡检服务的评价。</span>
        </p>
        <p>巡检前后亮度对比：
            <span>上面的仪表盘显示了贵院线放映机巡检后2D亮度的平均值；下面的仪表盘显示的是贵院线放映机巡检前2D亮度的平均值。</span>
        </p>

    </div>
</div>

<script type="text/javascript">
    $(function(){
        // $("select[name='chain']").children(":first").text("全部院线");
    })
    function search() {
        myChart.showLoading({
            text: '加载中'
        });
        $.getJSON("chainReportController.do?drawGauge" , $("#searchForm").serialize(), function (data) {
            console.log(data);
            myChart.hideLoading();
            if (!$.isEmptyObject(data)) {
                if (data.avg400 != undefined) {
                    option.series[0].data = [{value: data.avg400.score,name:'满意度评分'}];
                }
                if (data.avgData != undefined && data.avgSumData != undefined) {
                    option.series[1].data = [{
                        value:data.avgData.scoreBefore,name:'院线环境均分'
                    },{
                        value: data.avgSumData.scoreBefore,
                        itemStyle:{
                            normal:{
                                color:"#006400"
                            }
                        },
                        name:'全国环境均分'
                    }];
                    option.series[2].data = [{value: data.avgData.flBefore,name:'亮度对比'}];
                    option.series[3].data = [{value: data.avgData.flAfter}];
                }

            }
            myChart.setOption(option);

        })
    }
    $(function () {
        $(".search").click(function () {
            search();
        })
        $(".search").trigger("click")
    })

    var myChart = echarts.init(document.getElementById('chart'));
    var centerRadios = "60%";
    var sideRadios = "30%";
    var rightRadios = "30%";
    var sideWidth = 10;
    var centerWidth = 12;
    var option = {
        tooltip: {
            formatter: "{b} <br/>{c} "
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        series: [
            {
                name: '满意度评分',
                type: 'gauge',
                center: ['25%', '45%'],    // 默认全局居中
                radius: sideRadios,
                min: 3.5,
                max: 5,
                endAngle: 45,
                splitNumber: 3,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: sideWidth,
                        color:[[0.33,'#C23531'],[0.86,'#63869E'],[1,'#91C7AE']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length:12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length:20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title: {
                    offsetCenter: [0, '-120%'],       // x, y，单位px
                },

                detail: {
                    //backgroundColor: 'rgba(30,144,255,0.8)',
                    // borderWidth: 1,
                    borderColor: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5,
                    width: 80,
                    height: 30,
                    offsetCenter: [25, '20%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                    }
                },
                data: [{value: 0}, {value: 0}]
            },
            {
                name: '影院环境评分',
                type: 'gauge',
                min: 0,
                max: 100,
                center : ['50%', '40%'],
                radius: centerRadios,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: centerWidth,
                        color:[[0.7,'#C23531'],[0.8,'#63869E'],[1,'#91C7AE']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                title: {
                    offsetCenter: [0, '-120%'],       // x, y，单位px
                },

                pointer: {           // 分隔线
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5
                },
                detail: {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                },
                data: [{value: 0}]
            },
            {
                type: 'gauge',
                center: ['77%', '40%'],    // 默认全局居中
                radius: rightRadios,
                min: 0,
                max: 28 ,
                startAngle: 135,
                endAngle: 45,
                splitNumber: 2,
                tooltip: {
                    formatter: function(param){
                        return "巡检后<br/>"+param.value;
                    }
                },
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: sideWidth,
                        color:[[0.38,'#C23531'],[0.62,'#63869E'],[1,'#C23531']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    splitNumber: 5,
                    length: 10,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                axisLabel: {
                    formatter:function(v){
                        switch (v + '') {
                            case '0' : return '0';
                            case '14' : return '14FL';
                            case '28' : return '28';
                        }
                    }
                },
                splitLine: {           // 分隔线
                    length: 15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title: {
                    offsetCenter: [0, '-120%'],       // x, y，单位px
                    text :'亮度对比',
                    show:true
                },

                detail : {
                    show: false
                },
                data:[{value: 0.5}]
            },
            {
                name: '亮度对比',
                type: 'gauge',
                center : ['77%', '40%'],    // 默认全局居中
                radius : rightRadios,
                min: 0,
                max: 28,
                startAngle: 315,
                endAngle: 225,
                splitNumber: 2,
                tooltip: {
                    formatter: function(param){
                        return "巡检前<br/>"+param.value;
                    }
                },
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: sideWidth,
                        color:[[0.38,'#C23531'],[0.62,'#63869E'],[1,'#C23531']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    show: false
                },
                axisLabel: {
                    formatter:function(v){
                        switch (v + '') {
                            case '28' : return '28';
                            case '14' : return '14FL';
                            case '0' : return '0';
                        }
                    }
                },
                splitLine: {           // 分隔线
                    length: 15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title: {
                    show: false
                },
                detail: {
                    show: false
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
